<template>
  <div class="main">
    <div class="header clear">
        <button class="logout" @click="logout">退出</button>
        <div class="title">
            渠道名称：{{channelName}}
        </div>
        <div class="add" @click="toAdd()">
            <span class="jg jg-jiahao"></span><br>
            <span>创建商户</span>
        </div>
    </div>
    <div class="list" v-infinite-scroll="getList"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="-1">
      <div class="item" v-for='(item,index) in places' :key="index">
        <span class="name" @click="detail(index)">
          {{item.placename}}
        </span>
        <span class="item" @click="detail(index)">
          到期时间：{{reTime(item.gmtExpired)}}
        </span>
        <span class="icon" @click="scan(index)">
          <i class="jg jg-scan">
          </i>
        </span>
      </div>
    </div>
    <div class="model" v-if="detailShow">
      <div class="msk"></div>
      <div class="content">
        <div class="close" @click="detailShow=false;">X</div>
        <div class="body">
          <div class="body-inline">
            <label class="body-label">商户名称：</label>
            <span class="body-text">{{places[selectPlace].placename}}</span>
          </div>
          <div class="body-inline">
            <label class="body-label">商户类别：</label>
            <span class="body-text">{{enumType[places[selectPlace].placeType]}}</span>
          </div>
          <div class="body-inline">
              <label class="body-label">联系人：</label>
              <span class="body-text">{{places[selectPlace].name}}</span>
          </div>
          <div class="body-inline">
              <label class="body-label">手机号：</label>
              <span class="body-text">{{places[selectPlace].contactTel}}</span>
          </div>
          <div class="body-inline">
              <label class="body-label">所属区域：</label>
              <span class="body-text">{{places[selectPlace].region}}</span>
          </div>
          <div class="body-inline">
              <label class="body-label">地址：</label>
              <span class="body-text">{{places[selectPlace].streetAddress}}</span>
          </div>
          <div class="body-inline">
              <label class="body-label">订桌电话：</label>
              <span class="body-text">{{places[selectPlace].contactTel}}</span>
          </div>
        </div>  
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "home",
  data() {
    return {
      channelId: 0,
      channelName: "",
      page: 1,
      places: [],
      pagesize: 30,
      total: 0,
      maxPage: 0,
      detailShow: false,
      loading: false,
      selectPlace: 0,
      enumType: {
        1: "静吧",
        2: "动吧",
        3: "演艺吧",
        4: "量贩KTV",
        5: "KTV",
        6: "威士忌吧"
      }
    };
  },
  mounted() {
    var self = this;
    self.yl.get({
      url: "/channel/channel_api/info.json",
      data: {
        page: self.page
      },
      success: function(res) {
        if (res.result == "success") {
          self.channelId = res.data.channelId;
          self.channelName = res.data.channelName;
          //self.places = res.data.places;
          self.places = res.data.places;
          console.log(self.places);
          self.total = res.data.total;
          self.maxPage = Math.ceil(self.total / 30);
        } else if (res.result == "failure") {
          if (res.errorCode == 100) {
            self.$router.push("/login");
          }
        }
      }
    });
  },
  methods: {
    //加载更多
    getList() {
      var self = this;
      self.page++;
      console.log(self.maxPage);
      if (self.page >= self.maxPage && self.total > 0) {
        // self.$toast("没有更多数据了");
        self.page = self.maxPage;
        return;
      }
      self.loading = true;
      self.yl.get({
        url: "/channel/channel_api/info.json",
        data: {
          page: self.page
        },
        success: function(res) {
          self.loading = false;
          if (res.result == "success") {
            self.channelId = res.data.channelId;
            self.channelName = res.data.channelName;
            self.total = res.data.total;
            self.maxPage = Math.ceil(self.total / 30);
            self.places = self.places.concat(res.data.places);
          } else if (res.result == "failure") {
            if (res.errorCode == 100) {
              //self.$toast("登录超时");
              self.$router.push("/login");
            } else {
              self.$toast(res.errorMsg);
            }
          }
        }
      });
    },
    detail(index) {
      this.selectPlace = index;
      this.detailShow = true;
    },
    logout() {
      this.$router.push("/login");
    },
    toAdd() {
      this.$router.push("/add");
    },
    //扫码
    scan(index) {
      var self = this;
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(data) {
          var result = data.resultStr; // 当needResult 为 1 时，扫码返回的结果
          MessageBox.confirm(`确定绑定二维码到${self.places[index].placename}?`).then(function (message) {
                self.yl.get({
                url: "/channel/channel_api/scan_qrcode.json",
                data: {
                  placeid: self.places[index].placeId,
                  qrcodeUrl: result
                },
                success: function(res) {
                  if (res.result == "success") {
                    self.$toast("绑定成功");
                  } else {
                    self.$toast(res.errorMsg);
                  }
                }
              });
          }).catch(function (err) {
            self.$toast('取消绑定');
          });
        }
      });
    },
    reTime: function(date) {
      var gmtCreate = new Date(Number(date)),
        y = gmtCreate.getFullYear(),
        m =
          gmtCreate.getMonth() + 1 <= 9
            ? "0" + (gmtCreate.getMonth() + 1)
            : gmtCreate.getMonth() + 1,
        d =
          gmtCreate.getDate() <= 9
            ? "0" + gmtCreate.getDate()
            : gmtCreate.getDate(),
        h =
          gmtCreate.getHours() <= 9
            ? "0" + gmtCreate.getHours()
            : gmtCreate.getHours(),
        mi =
          gmtCreate.getMinutes() <= 9
            ? "0" + gmtCreate.getMinutes()
            : gmtCreate.getMinutes(),
        s =
          gmtCreate.getSeconds() <= 9
            ? "0" + gmtCreate.getSeconds()
            : gmtCreate.getSeconds();
      var date1 = y + "-" + m + "-" + d;
      return date1;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background: #f1f0f6;
  min-height: 100vh;
}
.main .header {
  padding: 0.8rem 0.5rem 0;
  background: #fff;
  margin-bottom: 0.05rem;
  position: relative;
}
.main .header .logout {
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgb(255, 11, 11);
}
.main .header .title {
  float: left;
  text-align: center;
  height: 0.85rem;
  line-height: 0.85rem;
  background: #e57653;
  border-radius: 0.6rem;
  font-size: 0.36rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  margin-bottom: 0.6rem;
  border: 3px solid #fdc8b1;
  width: calc(100% - 1.5rem);
}
.main .header .add {
  float: right;
  background: #e57653;
  border: 3px solid #fdc8b1;
  color: #fff;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  margin-top: -0.1rem;
  text-align: center;
  font-size: 0.24rem;
}
.main .header .add .jg {
  margin-top: 0.1rem;
  font-size: 0.4rem;
  line-height: 1.4;
}
.main .list {
  height: calc(100vh - 2.5rem);
  overflow: scroll;
}
.main .list .item {
  background: #fff;
  margin-bottom: 0.05rem;
  height: 0.82rem;
  line-height: 0.82rem;
  padding-left: 0.62rem;
}
.main .list .item .name {
  display: inline-block;
  width: 10em;
}
.main .list .item .icon {
  float: right;
  margin-top: 0.15rem;
  margin-right: 0.5rem;
  color: #fff;
  background: #000;
  width: 0.5rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border-radius: 50%;
}
.main .list .item .icon .jg {
  font-size: 0.26rem;
}
.main .model {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
}
.main .model .msk {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
  background: #000;
  z-index: 1000;
}
.main .model .content {
  width: 5.2rem;
  height: 5.86rem;
  position: relative;
  margin: auto;
  margin-top: 2rem;
}
.main .model .content .body {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2000;
  background: #e5e5e5;
  border-radius: 0.3rem;
  padding-left: 0.5rem;
  padding-top: 0.6rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  color: #666;
}
.main .model .content .close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #fff;
  z-index: 2000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.5rem;
  color: #fff;
}
.main .model .content .body .body-inline {
  margin-bottom: 0.2rem;
  overflow: hidden;
}
.main .model .content .body .body-inline .body-label {
  width: 5em;
  text-align: right;
  float: left;
  margin-right: 0.1rem;
}
.main .model .content .body .body-inline .body-text {
  color: #999;
  float: left;
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
